
<template>
  <div class="home">
    <el-container>
      <el-header>
        <el-row>
          <el-col>
            <h1>单词提取工具</h1>
          </el-col>
        </el-row>
      </el-header>
      <el-aside></el-aside>
      <el-main>
        <el-row :gutter="10">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-input
              type="textarea"
              :autosize="{ minRows: 10, maxRows: 10}"
              placeholder="请输入内容"
              v-model="initialWord"
            ></el-input>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <el-checkbox v-model="onRule" label="过滤" border class="widthmaximum"></el-checkbox>
          </el-col>
            <el-col :xs="18" :sm="18" :md="18" :lg="18" :xl="18">
            <el-button class="widthmaximum" type="primary" @click="analysis" :loading="okLoading">确定</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="20" :sm="20" :md="20" :lg="20" :xl="20">
            <h3 style="display:inline;margin-right:0.5em;">规则列表</h3>
            <span>({{rule.length}}) 个 </span>
          </el-col>
          <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
            <el-button @click="showRule=!showRule" plain class="widthmaximum">查看</el-button>
          </el-col>
        </el-row>
        <div v-if="showRule">
        <el-row :gutter="10">
          <el-col :xs="18" :sm="18" :md="18" :lg="18" :xl="18">
            <el-input lang="en" placeholder="请输入单词" v-model="newRule" clearable @keyup.enter.native="addRule(newRule)"></el-input>
          </el-col>
          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <el-button type="primary" @click="addRule(newRule)" class="widthmaximum">添加</el-button>
          </el-col>
        </el-row>
          <el-row :gutter="10" v-for="(item,index) in rule" :key="index">
            <el-col :xs="21" :sm="21" :md="21" :lg="21" :xl="21">
              <span>{{rule.length-index}}. {{item}}</span>
            </el-col>
            <el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3">
              <i @click="removeRule(index)" class="el-icon-delete"></i>
            </el-col>
          </el-row>
        </div>
        <el-row :gutter="10">
          <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
            <h3 style="display:inline;margin-right:0.5em;">生成单词</h3>
            <span><el-button>{{wordList.length}}</el-button></span>
          </el-col>
          <el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
            <el-button @click="showWordList=!showWordList" type="success" plain :loading="false" class="widthmaximum">查看</el-button>
          </el-col>
          <el-col :xs="7" :sm="7" :md="7" :lg="7" :xl="7">
            <el-button type="success" class="widthmaximum" icon="el-icon-download"
              @click="download">下载</el-button>
          </el-col>
        </el-row>
        <div v-show="showWordList">
          <el-row :gutter="10" v-for="(item,index) in wordList" :key="index">
            <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
              <span>单词：</span>
              <strong v-text="item.word"></strong>
              <span v-if="item.transform">{{item.transform}}</span>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-button  class="widthmaximum" v-if="!item.transform" @click="addRule(item.word)">加入规则</el-button>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <el-button class="btn-delete widthmaximum" type="danger" icon="el-icon-delete" @click="remove(index)">删除</el-button>
            </el-col>
          </el-row>
        </div>
      </el-main>
      <el-footer>
        <el-row>
          <el-col>
          <h6>说明：</h6>
            <p style="font-size:0.7rem;">不要使用微信打开，请用浏览器打开</p>
            <p style="font-size:0.7rem;">手机端保存后无法识别就修改文件名为xml</p>
            <p style="font-size:0.7rem;">我的邮箱：zhishi100@outlook.com</p>
          </el-col>
        </el-row>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: "home",
  components: {
    // HelloWorld
  },
  data: function() {
    return {
      showAdd:false, //显示添加
      showRule:false, //显示规则列表
      showWordList:false, //显示单词列表
      onRule:true, //开启规则
      initialWord: "", //初始文本内容
      okLoading:false, //确定加载中
      words: "",
      wordBook: "",
      wordArr: [],
      wordList: [],
      newWordArr: [],
      after: [],
      // 规则表
      rule: [],
      newRule: ""
    };
  },
  created: function() {
    //加载本地缓存的过滤规则表
    localStorage.rule && (this.rule = JSON.parse(localStorage.rule));
  },
  methods: {
    // 把文本转化为单词
    analysis: function() {
      this.okLoading = true;
      setTimeout(()=>{this.okLoading = false;},200)
      let pattern = /[a-zA-Z`]+/g; //创建单词过滤正则
      this.initialWord = this.initialWord.toLowerCase(); //转化为小写字母
      this.wordArr = this.initialWord.match(pattern); //把所有单词提取进数组
      this.wordArr = Array.from(new Set(this.wordArr)); //单词去重
      this.wordList.length = 0;
      this.wordArr.forEach(val => {
        this.wordList.push({ word: val, transform: "" });
      });
      if(this.onRule) this.filter(); //开启过滤
    },
    // 添加过滤单词
    addRule: function(addword) {
      if(this.rule.indexOf(addword)!== -1) return (
        this.$message({
          message: '单词已存在！',
          type: 'warning',
          center: true
          })
      );
      this.rule.unshift(addword);
      localStorage.rule = JSON.stringify(this.rule);
      this.newRule = '';
    },
    // 删除过滤单词
    removeRule: function(index) {
      this.rule.splice(index, 1);
      localStorage.rule = JSON.stringify(this.rule);
    },
    // 过滤
    filter: function() {
      this.rule.forEach(value => {
        this.wordList.forEach((valueInner, index) => {
          if (valueInner.word === value)
            return this.wordList.splice([index], 1);
        });
      });
    },
    remove: function(index) {
      this.wordList.splice(index, 1);
    },
    download: function() {
      // 拼接单词到标签
      this.wordArr.forEach(value => {
        this.newWordArr.push(`<item><word>${value}</word></item>`);
      });
      var content = this.newWordArr.join("");
      this.after = `<?xml version="1.0" encoding="UTF-8"?><wordbook>${content}</wordbook>`;

      function fakeClick(obj) {
        var ev = document.createEvent("MouseEvents");
        ev.initMouseEvent(
          "click",
          true,
          false,
          window,
          0,
          0,
          0,
          0,
          0,
          false,
          false,
          false,
          false,
          0,
          null
        );
        obj.dispatchEvent(ev);
      }
      function exportRaw(name, data) {
        var urlObject = window.URL || window.webkitURL || window;
        var export_blob = new Blob([data]);
        var save_link = document.createElementNS(
          "http://www.w3.org/1999/xhtml",
          "a"
        );
        save_link.href = urlObject.createObjectURL(export_blob);
        save_link.download = name;
        fakeClick(save_link);
      }
      var date = new Date();
      var formtDate = date.getFullYear()+'-'+(date.getMonth()-0 + 1) +'-'+ date.getDate() +'_'+ date.getHours() +'-'+ date.getMinutes();
      exportRaw(`wordbook(${this.wordList.length})${formtDate}.xml`, this.after);
    }
  }
};
</script>

<style scoped lang="stylus">
.home{
  max-width: 750px;
  margin: 0 auto;
}
.input-wrap {
  margin: 20px;
}

.word_list {
  text-align: left;
}
.el-row
  margin-top 20px
</style>

